<template>

  <div>
    <!--    头部开始-->
    <div style="height: 60px;background-color: #7474e1;display: flex;align-items: center">
      <div style="width: 200px;display: flex;align-items: center;font-size: 20px;color: black">赛事管理后台</div>
      <div style="flex: 1;padding-left: 350px;" ><img src="@/assets/Sheep.png" alt="" style="width: 59px;object-fit: contain"></div>
      <div style="flex: 1;padding-right: 350px;" ><img src="@/assets/Sheep.png" alt="" style="width: 59px;object-fit: contain"></div>

      <div style="display: flex;width:fit-content;align-items: center;padding-right: 20px">
        <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png " alt="" style="width: 40px">
        <span STYLE="margin-left: 2px">{{data?.user?.username}}</span>
      </div>
    </div>
    <!--    头部结束-->

    <!--    展示开始-->
    <div style="display: flex">
      <!--    左侧导航栏-->
      <div
          style="border-right: 1px solid #c9c9ef;background-color: #c9c9ef ;width: 200px; min-height: calc(100vh - 60px) ">
        <el-menu router :default-active="router.currentRoute.value.path" :default-openeds="['/manager/competitor']" style="background-color: #c9c9ef ">
          <el-menu-item index="/CompetitionIndex">
            <el-icon><HomeFilled/></el-icon>系统首页</el-menu-item>
          <el-sub-menu index="/manager/competitor">
            <template #title>
              <el-icon><User/></el-icon><span>用户管理</span></template>
            <el-menu-item style="background-color:#c8d5ea " index="/Manager/racer"><el-icon><User/></el-icon>参赛者管理</el-menu-item>
            <el-menu-item style="background-color:#c8d5ea " index="/Manager/adjusticator"><el-icon><User/></el-icon>评委管理</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="/manager/competition">
            <template #title><el-icon><Trophy/></el-icon><span>比赛</span></template>
            <el-menu-item index="/manager/eventInformation"><el-icon ><Trophy/></el-icon>具体赛事</el-menu-item>
            <el-menu-item index="/manager/eventApply"><el-icon ><Trophy/></el-icon>参赛者报名情况</el-menu-item>
            <el-menu-item index="/manager/eventCategory"><el-icon ><Trophy/></el-icon>赛事大类</el-menu-item>
            <el-menu-item index="/manager/EventCategoryRelation"><el-icon ><Trophy/></el-icon>赛事关联</el-menu-item>
          </el-sub-menu>

          <el-menu-item index="/Manager/Data"><el-icon><CameraFilled/></el-icon>评分情况</el-menu-item>
          <el-menu-item index="/Manager/notice"><el-icon><CameraFilled/></el-icon>赛事公告</el-menu-item>
          <el-menu-item index="/Manager/file"><el-icon><CameraFilled/></el-icon>赛事文件</el-menu-item>
          <el-menu-item index="/login"><el-icon><SwitchButton /></el-icon>退出系统</el-menu-item>

        </el-menu>


      </div>
      <!-- 左侧导航栏结束   -->

      <!--   右侧数据展示开始-->
      <div style="width: 0; flex: 1;background-color: #e7f1e4;padding: 20px">
        <RouterView/>
      </div>
      <!--   右侧数据展示开始-->
    </div>
    <!--    展示结束-->

  </div>
</template>

<script setup>
import {CameraFilled, HomeFilled, House, Location, Reading, SwitchButton, Trophy, User} from "@element-plus/icons-vue";
import router from "@/router";
import {reactive} from "vue";

const  data = reactive({
  user: JSON.parse(localStorage.getItem('admin'))//转对象，{{data.user.username}}可使用在这
})

</script>

<style>

</style>
